<template>
  <div>
    <div>修改学生信息</div>
    <el-button type="success" @click="this.dialogInsert = true">注册学生</el-button>
    <div>
      <el-table :data="record" stripe border style="width: 100%">

        <el-table-column prop="UserId" label="学生学号" align="center" style="width:10%"></el-table-column>
        <el-table-column prop="sname" label="学生姓名" align="center" style="width:10%"></el-table-column>
        <el-table-column prop="ssex" label="学生性别" align="center" style="width:5%"></el-table-column>
        <el-table-column prop="class_name" label="所属班级" align="center" style="width:10%"></el-table-column>
        <el-table-column prop="major_name" label="所属专业" align="center" style="width:10%"></el-table-column>
        <el-table-column prop="college_name" label="所属学院" align="center" style="width:15%"></el-table-column>
        <el-table-column prop="grade" label="所属年级" align="center" style="width:10%"></el-table-column>


        <el-table-column label="选项" align="center" style="width:30%">
          <template #default="scope">
            <el-button type="warning" @click="editRecord(scope.row)">编辑</el-button>
            <el-divider direction="vertical" />
            <el-button type="danger" @click="deleteRecord(scope.row)">删除</el-button>
          </template>
        </el-table-column>


      </el-table>

    </div>
    <div>
      <!--      编辑的dialog-->
      <el-dialog v-model="this.dialogVisible" @close="this.dialogVisible = false" style="width: 80%; height: 80%">
        <el-form :model="this.editForm" :rules="rules" ref="editForm">

          <el-form-item prop="UserId" label="UserId">
            <el-input placeholder="请输入学号" v-model="this.editForm.sid" disabled="true"></el-input>
          </el-form-item>

          <el-form-item prop="sname" label="sname">
            <el-input placeholder="请输入姓名" v-model="this.editForm.sname"></el-input>
          </el-form-item>

          <el-form-item prop="ssex" label="ssex">
            <el-input placeholder="请输入性别" v-model="this.editForm.ssex"></el-input>
          </el-form-item>

          <el-form-item prop="class_name" label="class_name">
            <el-input placeholder="请输入所属班级" v-model="this.editForm.class_name"></el-input>
          </el-form-item>

          <el-form-item prop="major_name" label="major_name">
            <el-input placeholder="请输入所属专业" v-model="this.editForm.major_name"></el-input>
          </el-form-item>

          <el-form-item prop="college_name" label="college_name">
            <el-input placeholder="请输入所属学院" v-model="this.editForm.college_name"></el-input>
          </el-form-item>

          <el-form-item prop="grade" label="grade">
            <el-input placeholder="请输入所属年级" v-model="this.editForm.grade"></el-input>
          </el-form-item>


        </el-form>
        <el-button-group>
          <el-button type="primary" size="mini" @click="editRecordSubmit('editForm')">提交</el-button>
          <el-button type="info" size="mini" @click="this.dialogVisible = false;resetForm('editForm')">取消</el-button>
        </el-button-group>
      </el-dialog>
    </div>


    <el-dialog @close="this.dialogInsert = false" append-to-body v-model="dialogInsert" title="注册学生" width="30%" style="top: 150px">
      <el-form :model="NewUser" :rules="Newrules" ref="NewUser">
        <el-row>
          <el-col :span="13">
            <el-form-item label="学号" prop="UserId" style="width: 270px">
              <el-input v-model="NewUser.UserId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="姓名" prop="sname" style="width: 270px">
              <el-input v-model="NewUser.sname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="性别" prop="ssex" style="width: 270px">
              <!--                <el-input v-model="NewUser.ssex"></el-input>-->
              <el-select v-model="NewUser.ssex" placeholder="请输入性别" size="mini" prefix-icon="el-icon-edit">
                <el-option v-for="item in sexname" :value="item">

                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="13">
            <el-form-item label="年级" prop="grade" style="width: 270px">
              <!--                <el-input v-model="NewUser.grade"></el-input>-->
              <el-select v-model="NewUser.grade" placeholder="请输入年级" size="mini" prefix-icon="el-icon-edit">
                <el-option v-for="item in gradename" :value="item">

                </el-option>

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="13">
            <el-form-item label="学院" prop="class_name" style="width: 270px" >
              <el-select @change="changeEditSelect" v-model="NewUser.college_name" placeholder="请输入学院名称" size="mini" prefix-icon="el-icon-edit">
                <el-option v-for="(item,index) in department_names"
                           :key="index"
                           :label="item"
                           :value="item">

                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="13">
            <el-form-item label="专业" prop="post_name" style="width: 270px">
              <el-select @change="changeClass" v-model="NewUser.major_name" placeholder="请输入专业名称" size="mini" prefix-icon="el-icon-edit">
                <el-option
                    v-for="(item, index) in post_type_options"
                    :key="index"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="13">
            <el-col :span="13">
              <el-form-item label="班级" prop="class_name" style="width: 270px">
                <el-input v-model="NewUser.class_name"></el-input>
              </el-form-item>
            </el-col>
          </el-col>

        </el-row>


        <el-row>
          <!--            <el-col :span="12">-->
          <!--              <el-form-item label="学院表单" prop="class_name" style="width: 200px">-->
          <!--                <el-select @change="changeEditSelect" v-model="NewUser.college_name" placeholder="请输入学院名称" size="mini">-->
          <!--                  <el-option v-for="(item,index) in department_names" :key="index" :label="item" :value="item">-->

          <!--                  </el-option>-->
          <!--                </el-select>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->


          <el-col :span="13">
            <el-form-item label="密码" prop="Password" style="width: 270px">
              <el-input v-model="NewUser.Password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-button type="success" @click="InsertStu('NewUser');this.dialogInsert = false">注册</el-button>
        <el-button @click="this.dialogInsert = false">取 消</el-button>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "path1",
  data() {
    return {
      record: [],
      dialogVisible : false,
      editForm : {
        UserId : '',
        sname : '',
        ssex : '',
        class_name : '',
        major_name : '',
        college_name : '',
        grade : '',
      },
      rules : {
        UserId : [
          {required: true, message: '请输入学号', trigger: 'blur'}
        ],
        sname : [
          {required: true, message: '请输入学生姓名', trigger: 'blur'}
        ],
        ssex : [
          {required: true, message: '请输入性别', trigger: 'blur'}
        ],
        class_name : [
          {required: true, message: '请输入班级名称', trigger: 'blur'}
        ],
        major_name : [
          {required: true, message: '请输入专业名称', trigger: 'blur'}
        ],
        college_name : [
          {required: true, message: '请输入学院名称', trigger: 'blur'}
        ],
        grade : [
          {required: true, message: '请输入年级', trigger: 'blur'}
        ],
      },

      NewUser:{
        UserId:'',
        sname:'',
        ssex:'',
        Password:'',
        grade:'',
        college_name:'',
        major_name:'',
        class_name: ''
      },

      Newrules:{
        UserId:{required:true,message:'请输入学号',trigger:'blur'},
        sname: {required:true,message:'请输入姓名',trigger:'blur'},
        ssex: {required:true,message:'请输入性别',trigger:'blur'},
        grade: {required:true,message:'请输入年级',trigger:'blur'},
        college_name: {required:true,message:'请输入学院',trigger:'blur'},
        major_name: {required:true,message:'请输入专业',trigger:'blur'},
        Password:{required:true,message:'请输入密码',trigger:'blur'},
        class_name:{required:true,message:'请输入班级',trigger:'blur'}
      },


      sexname:['男','女'],

      gradename:['2018','2019','2020','2021'],

      department_names : ['计算机科学与工程', '机电工程', '文法学院', '生命科学', '理学院','经济管理','信息与通信工程','外国语','土木工程','建筑','设计','国际商','环境与资源','预科教育','物理与材料工程'],
      post_names : {
        '计算机科学与工程' : ['软件工程', '网络工程', '计算机科学与技术', '人工智能'],
        '机电工程' : ['自动化', '测控技术与仪器','车辆工程','机器人工程','机械设计制造及其自动化','智能制造工程'],
        '文法学院' : ['新闻学', '法学','汉语国际教育','汉语言文学'],
        '生命科学' : ['制药工程', '应用化学','生物工程','化学工程与工艺','食品质量与安全','食品科学与工程'],
        '理学院' : ['信息与计算科学', '统计学','区块链工程','数学与应用数学'],
        '经济管理' : ['行政管理', '市场营销','人力资源管理','工商管理','航空服务艺术与管理','经济学','旅游管理'],
        '信息与通信工程' : ['物联网工程', '通信工程','电子信息工程'],
        '外国语' : ['英语', '朝鲜语','日语'],
        '土木工程' : ['土木工程', '工程管理','建筑环境与能源应用工程'],
        '建筑' : ['环境设计', '建筑学','城乡规划'],
        '设计' : ['产品设计', '视觉传达设计','动画','工业设计'],
        '国际商' : ['财务管理', '国际经济与贸易','国际商务','会计学'],
        '环境与资源' : ['生物技术', '环境工程','环境科学'],
        '预科教育' : ['少数民族预科'],
        '物理与材料工程' : ['功能材料', '光电信息科学与工程'],
      },

      class_name:{
        '软件工程' : ['软件201','软件202'],
        '机电工程' : ['机电201','机电202'],
      },

      post_type_options : [],
      class_names :[],

      dialog:false,
      captchaImg: null,
      dialogInsert:false

    }
  },
  created() {
    this.initRecord();
  },
  methods: {
    initRecord() {
      this.$axios.post("api/ShowStudent").then(res => {
        console.log("学生信息 = ", res.data);
        this.record = res.data.data;
      })
    },
    editRecord(row) {
      this.dialogVisible = true;
      this.editForm.UserId = row.UserId
      this.editForm.sname = row.sname
      this.editForm.ssex = row.ssex
      this.editForm.class_name = row.class_name
      this.editForm.major_name = row.major_name
      this.editForm.college_name = row.college_name

    },
    editRecordSubmit(row) {

      let data = {
        UserId :this.editForm.UserId,
        sname:this.editForm.sname,
        ssex:this.editForm.ssex,
        class_name:this.editForm.class_name,
        major_name:this.editForm.major_name,
        college_name:this.editForm.college_name,
        grade:this.editForm.grade,
      };
      this.$axios.post(`api/EditStudent`,data).then((res) =>{
        if(res.data.msg === "更新成功"){
          this.initRecord()
        }
        else{

        }
      })

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    deleteRecord(row) {
      let data = {
        UserId:row.UserId
      }

      this.$axios.post(`api/DelStudent`,data).then(res => {
        if(res.data === "删除成功"){
          this.initRecord()
        }
        else{

        }
      })

    },

    InsertStu(formName){
      console.log("formname = ",formName)
      this.$refs[formName].validate((valid) =>{
        if(valid){
          console.log(this.NewUser)
          // params里，UserId，sname等变量，是作为json键值对的key，与后端结构的json相对应
          const params = {
            UserId: this.NewUser.UserId,
            sname: this.NewUser.sname,
            ssex: this.NewUser.ssex,
            Password: this.NewUser.Password,
            grade: this.NewUser.grade,
            college_name: this.NewUser.college_name,
            major_name: this.NewUser.major_name,
            class_name: this.NewUser.class_name
          };

          console.log("输入数据："+params.UserId+params.sname+params.major_name);

          this.$axios.post('api/Register',{...params}).then(res => {
                console.log(res);

                if(res.data.msg == "注册成功"){
                  // alert("注册成功")
                  this.initRecord();
                  const jwt = res.headers['Authorization']
                  this.dialog = false;
                  // this.$router.push('/index')
                  this.$store.commit('SET_TOKEN',jwt)
                }

                else{
                  // alert(res.data.msg)
                }

              }
          )

        }
      })
    },

    changeEditSelect() {
      // 清空专业内容
      this.NewUser.major_name = ''
      // this.NewUser.class_name = ''
      // 遍历专业的下拉选项数组
      for (const k in this.department_names) {
        // 专业名称 是否等于 专业名称的下拉选择数组中的某一项
        if (this.NewUser.college_name === this.department_names[k]) {
          this.post_type_options = this.post_names[this.NewUser.college_name]
        }
      }
      //班级名称是否等于班级名称下拉数组的某一项
      // for(const j in this.post_names){
      //   if(this.NewUser.major_name === this.post_names[j]){
      //     this.class_names = this.class_name[this.NewUser.major_name]
      //   }
      //
      // }
      console.log("post_type_options = "+this.post_type_options);
    },

    changeClass() {
      this.NewUser.class_name = ''

      //班级名称是否等于班级名称下拉数组的某一项
      for (const j in this.post_names) {
        if (this.NewUser.major_name === this.post_names[j]) {
          this.class_names = this.class_name[this.NewUser.major_name]
        }
      }
      console.log(this.NewUser.class_name)
    },

  },




}
</script>

<style scoped>

</style>